<template>
  <div style="background-color: white;">
    <span style="color: grey">当前位置 >> 科研专利管理 >> 科研专利录入</span>
    <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm" :rules="formRules"
             style="width: 500px;margin-left: 350px;margin-top: 50px"
    >

      <el-form-item label="专利类型" prop="psort" style="margin-top: 20px">
        <el-input type="text" v-model="ruleForm.psort" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="第一发明人" prop="finventor" style="margin-top: 10px">
        <el-input type="text" v-model="ruleForm.finventor" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item label="其他发明人人数" style="margin-top: 10px">
        <el-card style="width: 400px">
          <template #header>
            <div class="card-header">
              <span>请选择其他发明人人数</span>
            </div>
          </template>
          <el-input-number v-model="oinventorNum" :min="1" label="ssss"
                           @change="oinventorsOk"></el-input-number>
        </el-card>
      </el-form-item>

      <el-form-item label="其他发明人" prop="oinventor" style="margin-top: 10px">
        <el-card class="box-card" style="width: 400px;">
          <template #header>
            <div class="card-header">
              <span>单行输入一个其他发明人</span>
            </div>
          </template>
          <div v-for="o in this.oinventorNum" :key="o" class="text item">
            <el-input type="text" autocomplete="off" v-model="this.oinventors[o]" style="margin-bottom: 10px"
                      @blur.prevent="oinventorsOk"></el-input>
          </div>
        </el-card>
      </el-form-item>

      <el-form-item label="是否联合申报" prop="joint">
        <el-switch
            v-model="ruleForm.joint"
            active-text="已申报"
            inactive-text="未申报"
            active-value="1"
            inactive-value="0"
            @change="chagnejoint"
        >
        </el-switch>
      </el-form-item>

      <el-form-item label="专利权人人数" style="margin-top: 10px" v-if="ruleForm.joint === '1'">
        <el-card style="width: 400px">
          <template #header>
            <div class="card-header">
              <span>请选择专利权人人数</span>
            </div>
          </template>
          <el-input-number v-model="patenteeNum" :min="2" label="ssss"
                           @change="patenteesOk"></el-input-number>
        </el-card>
      </el-form-item>

      <el-form-item label="专利权人" prop="patentee" style="margin-top: 10px" v-if="ruleForm.joint === '1'">
        <el-card class="box-card" style="width: 400px;">
          <template #header>
            <div class="card-header">
              <span>单行输入一个专利权人</span>
            </div>
          </template>
          <div v-for="o in this.patenteeNum" :key="o" class="text item">
            <el-input type="text" autocomplete="off" v-model="this.patentees[o]" style="margin-bottom: 10px"
                      @blur.prevent="patenteesOk"></el-input>
          </div>
        </el-card>
      </el-form-item>

      <el-form-item label="专利权人" prop="patentee" style="margin-top: 10px" v-if="ruleForm.joint === '0'">
        <el-input type="text" v-model="ruleForm.patentee" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="专利号" prop="patentnumber" style="margin-top: 10px">
        <el-input type="text" v-model="ruleForm.patentnumber" autocomplete="off"
                  @blur.prevent="changePatentNumber"></el-input>
        <span v-if="this.torf === false" style="font-size: 10px;color: red">该专利已经录入</span>
      </el-form-item>


      <el-form-item label="专利申请日" prop="sdate">
        <div class="block">
          <el-date-picker v-model="ruleForm.sdate"
                          type="date" style="width: 400px" placeholder="请选择专利申请时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="授权公告日" prop="gdate">
        <div class="block">
          <el-date-picker v-model="ruleForm.gdate"
                          type="date" style="width: 400px" placeholder="请选择授权公告时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="授权公告号" prop="announcement" style="margin-top: 10px">
        <el-input type="text" v-model="ruleForm.announcement" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item label="下个专利年费缴费日" prop="ndate">
        <div class="block">
          <el-date-picker v-model="ruleForm.ndate"
                          type="date" style="width: 400px" placeholder="请选择下个专利年费缴费日">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="专利案件状态" prop="state" style="margin-top: 10px">
        <el-input type="text" v-model="ruleForm.state" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item label="文件资料" prop="files">
        <el-upload
            class="upload-demo"
            drag
            action="http://222.21.119.252:9999/files/upload"
            multiple
            list-type="text"
            :on-success="filesUploadSuccess"
            :on-error="filesUploadError"
            :before-upload="checkFileBefore"
            style="width: 400px"
            :data=fileVO
            :limit="1"
            :on-exceed='limitCheck'
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽上传 或 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              仅支持上传一个文件,且最大容量为100MB
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容" v-model="ruleForm.remark" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="commit" style="width:100%; height:100%;margin-bottom:15px;">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {UploadFilled} from "@element-plus/icons-vue";
import request from "@/utils/request";

export default {
  components: {
    UploadFilled
  },
  name: "addPaper",
  data() {
    return {
      fileVO: {
        sort: 'patent',
        fileName: ''
      },
      oinventorNum: 1,
      oinventors: [],
      patenteeNum: 2,
      patentees: [],
      loadering: true,
      torf: true,
      ruleForm: {
        patentnumber: ''
      },
      formRules: {
        announcement: [
          {required: true, message: '请输入授权公告号', trigger: 'blur'}
        ],
        files: [
          {required: true, message: '请上传文件', trigger: 'blur'}
        ],
        finventor: [
          {required: true, message: '请输入输入第一发明人', trigger: 'blur'}
        ],
        gdate: [
          {required: true, message: '请选择授权公告日', trigger: 'blur'}
        ],
        ndate: [
          {required: true, message: '请输入下一个专利年费缴费日期', trigger: 'blur'}
        ],
        patentee: [
          {required: true, message: '请输入专利权人', trigger: 'blur'}
        ],
        patentnumber: [
          {required: true, message: '请输入专利号', trigger: 'blur'}
        ],
        psort: [
          {required: true, message: '请输入专利类型', trigger: 'blur'}
        ],
        sdate: [
          {required: true, message: '请输入专利申请日', trigger: 'blur'}
        ],
        state: [
          {required: true, message: '请输入专利案件状态', trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    //  修改鉴定状态
    chagnejoint() {
      this.ruleForm.patentee = '';
    },
    commit() {
      console.log(this.ruleForm);
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          this.$message.error("请输入必选项!")
          return
        }
        request.post("/patent", this.ruleForm).then(res => {
          if (res.code === '200') {
            //弹出成功框
            this.$message.success("添加成功");
          } else {
            this.$message.error("添加失败!请检查表单是否填写完整");
          }
        }).catch(() => {
          this.$message.error("服务器错误!请联系管理员或重新尝试");
        })
      })

    },
    changePatentNumber() {
      if (this.ruleForm.patentnumber === '') {
        this.torf = true;
      } else {
        request.get(`/patent/patentnumber/` + this.ruleForm.patentnumber).then(res => {
          if (res.code === '200') {
            //表示没有,能通过
            this.torf = true;
          } else {
            //表示有,则不可以通过
            this.torf = false;
          }
        });
      }
    },
    oinventorsOk() {
      //第一个字符为 , 需要去除
      this.ruleForm.oinventor = this.oinventors.slice(1, this.oinventorNum + 1).toString();
    },

    patenteesOk() {
      //第一个字符为 , 需要去除
      this.ruleForm.patentee = this.patentees.slice(1, this.patenteeNum + 1).toString();
    },

    //文件上传成功
    filesUploadSuccess(res) {

      this.ruleForm.files = res.data;
    },
    //上传之前
    checkFileBefore(file) {

      if (this.ruleForm.patentnumber === '') {
        this.$message.error("上传文件前请先输入专利号!");
        return false;
      }
      if (file.size / 1024 / 1024 > 100) {
        this.$message.error("文件大小不得超过100MB");
        return false;
      }

      //文件命名
      this.fileVO.fileName = this.ruleForm.patentnumber;

    },

    limitCheck() {
      this.$message.warning('只能上传一个文件');
    },


    filesUploadError(res) {
      console.log(res);
      if (res.code === '201') {
        this.$message.error(res.data.msg);
      } else {
        this.$message.error("上传失败,请重新尝试或联系管理员");
      }
    }

  }
}
</script>

<style scoped>

</style>

